<template>
	<view class="venue-item" @tap="goToDetail">
		<view class="venue-image-wrapper">
			<image 
				class="venue-image" 
				:src="venue.coverImage || '/static/images/default-venue.png'" 
				mode="aspectFill"
				@error="handleImageError"
			></image>
		</view>
		<view class="venue-info">
			<!-- 场地名称和距离 -->
			<view class="venue-header">
				<text class="venue-name">{{ venue.name }}</text>
				<text class="venue-distance" v-if="venue.distance">[{{ venue.distance }}km]</text>
			</view>
			
			<!-- 地址信息 -->
			<view class="venue-location">
				<text>{{ venue.address }}</text>
			</view>
			
			<!-- 标签列表 -->
			<view class="venue-tags">
				<text class="tag" v-for="(tag, index) in facilitiesArray" :key="index">{{ tag }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VenueItem',
		props: {
			venue: {
				type: Object,
				required: true
			}
		},
		computed: {
			facilitiesArray() {
				if (!this.venue.facilities) return []
				// 将字符串按英文逗号分割成数组，并过滤掉空值
				return this.venue.facilities.split(',').filter(item => item.trim())
			}
		},
		methods: {
			formatDistance(distance) {
				if (!distance) return ''
				const dist = parseFloat(distance)
				if (dist >= 1000) {
					return (dist / 1000).toFixed(1) + 'km'
				}
				return dist + 'm'
			},
			goToDetail() {
				uni.navigateTo({
					url: `/pages/venue/detail?id=${this.venue.id}`
				})
			},
			handleImageError() {
				// 图片加载失败时使用默认图片
				if (this.venue.coverImage) {
					this.venue.coverImage = '/static/images/default-venue.png'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.venue-item {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.venue-image-wrapper {
			width: 100%;
			height: 400rpx;
			overflow: hidden;
			position: relative;
			background-color: #f5f5f5; // 添加背景色，防止图片加载时出现空白
			
			.venue-image {
				width: 100%;
				height: 100%;
				object-fit: cover; // 确保图片填充整个容器
				border-radius: 8rpx 8rpx 0 0;
				transition: transform 0.3s ease; // 添加过渡效果
				
				&:hover {
					transform: scale(1.05); // 鼠标悬停时轻微放大效果
				}
			}
		}
		
		.venue-info {
			padding: 20rpx;
			
			.venue-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				.venue-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.venue-distance {
					font-size: 26rpx;
					color: #666;
				}
			}
			
			.venue-location {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 12rpx;
			}
			
			.venue-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				
				.tag {
					font-size: 24rpx;
					color: #ff6b35;
					background-color: #fff5f0;
					padding: 4rpx 16rpx;
					border-radius: 4rpx;
					max-width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style> 